<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.ico" />
    <title>webman</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/index.css">
    <script src="/layui/layui.js"></script>
</head>

<body>
    <!-- 上传 -->
    <div class="layui-upload-drag" style="display: block;" id="ID-upload-demo-drag">
        <i class="layui-icon layui-icon-upload"></i>
        <div>点击上传，或将文件拖拽到此处</div>
        <div>支持JPG/PNG/GIF/SVG格式</div>
        <div class="layui-hide" id="ID-upload-demo-preview">
            <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
        </div>
    </div>
    <form class="layui-form layui-form-pane" action="">
        <!-- 强度 -->
        <div class="img-wh-qd">
            <div class="layui-form-item">
                <label class="layui-form-label">压缩强度</label>
                <div class="layui-input-block">
                    <div>
                        <div id="slider-demo"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">保存路径</label>
                <div class="layui-input-block layui-input-wrap">
                    <input type="text" name="path" onclick="set_path()" readonly autocomplete="off" lay-reqtext="保存路径"
                        class="layui-input">
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                            onclick="open_dir()">打开文件夹</button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">文件前缀</label>
                <div class="layui-input-group">
                    <input type="text" name="prefix" autocomplete="off" value="tuya-" class="layui-input">
                    <div class="layui-input-split layui-input-suffix">
                        tuya-original_filename.jpg
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
<script>
    var upload = layui.upload;
    var $ = layui.$;
    var slider = layui.slider;
    var layer = layui.layer;

    slider.render({
        elem: '#slider-demo',
        step: 10, // 步长
        showstep: true, // 开启间隔点
        tips: true,
        min: 10,
        max: 100, // 最大值
        value: 90,
        input: true
    });

    async function set_path() {
        var dir = await win_open_dir()
        if (dir != "") {
            $(`[name="path"]`).val(`${dir}`)
        }
    }

    async function base_path() {
        var f = await win_getwd()
        $(`[name="path"]`).val(`${f}\\images`)
    }
    base_path()

    function open_dir() {
        var dir = $(`[name="path"]`).val()
        $.get(`{:route("opendir")}`, { "path": dir },
            function (res) {
                if (res.code != 0) {
                    layer.msg("打开失败")
                }
            })
    }

    // 渲染
    upload.render({
        elem: '#ID-upload-demo-drag',
        url: '{:route("index")}', // 实际使用时改成您自己的上传接口即可。
        accept: "images",
        exts: "jpg|png|gif|svg",
        data: {
            // 压缩强度参数
            strength: function () {
                return $("#slider-demo input").val()
            },
            //保存路径
            path: function () {
                return $(`[name="path"]`).val()
            },
            // 文件前缀
            prefix: function () {
                return $(`[name="prefix"]`).val()
            }
        },
        multiple: true,
        before: function (obj) {
            layer.load(0);
        },
        done: function (res, index, upload) { // 成功的回调
            layer.closeAll();
        },
        allDone: function (obj) {
            layer.closeAll();
            layer.msg(`总压缩 ${obj.total} 张\n成功 ${obj.successful} 张\n失败 ${obj.failed}张`, function () {
                // window.location.reload()
            })
        },
        error: function (index) {
            layer.closeAll();
            layer.msg(`第${index}张图片压缩失败`, { icon: 2 })
        }
    });

</script>

</html>